<template>
<div>
    <el-container style="height: 750px; border: 1px solid #eee">
    <el-header>
        <div class="butt">
            <el-button plain @click="logout">退出</el-button>
        </div>
        图书借阅系统管理员后台
    </el-header>
    <el-container>
        <el-aside width="220px">
            <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose">
            <el-menu-item index="1">
                <span slot="title" @click="open8">首页</span>
            </el-menu-item> 
            <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title" @click="open1">图书分类管理</span>
            </el-menu-item> 
            <el-submenu index="3">
                <template slot="title">
                <i class="el-icon-collection"></i>
                <span>图书信息管理</span>
                </template>
                <el-menu-item-group>
                <el-menu-item index="3-1" @click="open2">图书列表</el-menu-item>
                <el-menu-item index="3-2" @click="open3">图书新增</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">
                <i class="el-icon-user"></i>
                <span>用户信息管理</span>
                </template>
                <el-submenu index="4-1">
                <template slot="title">用户</template>
                <el-menu-item index="4-1-1" @click="open4">用户列表</el-menu-item>
                </el-submenu>
                <el-submenu index="4-2">
                <template slot="title">管理员</template>
                <el-menu-item index="4-2-1" @click="open5">管理员列表</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-submenu index="5">
                <template slot="title">
                <i class="el-icon-receiving"></i>
                <span>借阅信息管理</span>
                </template>
                <el-menu-item index="5-1" @click="open6">借阅列表</el-menu-item>
                <el-menu-item index="5-2" @click="open7">审核列表</el-menu-item>
            </el-submenu>
            </el-menu>
        </el-aside>
        <el-main>
            <!-- <el-collapse-transition> -->
                <router-view></router-view>
            <!-- </el-collapse-transition> -->
        </el-main>
    </el-container>
    </el-container>
</div>
</template>

<script>
import 'element-ui/lib/theme-chalk/base.css';
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import Vue from 'vue'
Vue.component(CollapseTransition.name, CollapseTransition)

export default {
    data () {
        return {
            
        }
    },
    methods: {
        logout(){
            localStorage.clear()
            this.$message.success("登出成功")
            this.$router.push("/")
        },
        open1(){
            if(this.$router.currentRoute.fullPath != "/admindex/booktype"){
                this.$router.push("/admindex/booktype")
            }else{
                return
            }
        },
        open2(){
            if(this.$router.currentRoute.fullPath != "/admindex/booklist"){
                this.$router.push("/admindex/booklist")
            }else{
                return
            }
        },
        open3(){
            if(this.$router.currentRoute.fullPath != "/admindex/bookadd"){
                this.$router.push("/admindex/bookadd")
            }else{
                return
            }
        },
        open4(){
            if(this.$router.currentRoute.fullPath != "/admindex/userlist"){
                this.$router.push("/admindex/userlist")
            }else{
                return
            }
        },
        open5(){
            if(this.$router.currentRoute.fullPath != "/admindex/adminlist"){
                this.$router.push("/admindex/adminlist")
            }else{
                return
                
            }
        },
        open6(){
            if(this.$router.currentRoute.fullPath != "/admindex/borrowlist"){
                this.$router.push("/admindex/borrowlist")
            }else{
                return
            }
        },
        open7(){
            if(this.$router.currentRoute.fullPath != "/admindex/auditlist"){
                this.$router.push("/admindex/auditlist")
            }else{
                return
            }
        },
        open8(){
            if(this.$router.currentRoute.fullPath != "/admindex"){
                this.$router.push("/admindex")
            }else{
                return
            }
        },
    },
    mounted () {
        
    }
}
</script>

<style>
    .el-header{
        background-color: #088b4c81;
        color: #ffffff;
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        font-weight: 900;
    }
    
    .el-aside {
        background-color: #ffffff;
        color: #048e26;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
  }
    .butt{
        position: absolute;
        top:0%;
        right: 2%;
    }
</style>